import React, {Component} from 'react';
import { message, Pagination,Spin,Icon  } from 'antd';

const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;

export default class app extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isToggleOn: true,
            clickCount: 0,
            opacity: 1.0
        }

        // 这边绑定是必要的，这样 `this` 才能在回调函数中使用
        this.handleClick = this.handleClick.bind(this);
        this.countClick = this.countClick.bind(this);
    }

    countClick() {
        this.setState(function (state) {
            return {clickCount: state.clickCount + 1};
        });
    }

    handleClick(name, age, e) {
        e.preventDefault();
        message.info('名字：' + name + '   年龄：' + age);
    }

    componentDidMount() {
        this.timer = setInterval(function () {
            var opacity = this.state.opacity;
            opacity -= .05;
            if (opacity < 0.1) {
                opacity = 1.0;
            }
            this.setState({
                opacity: opacity
            });
        }.bind(this), 100);
    }

    render() {
        return (
            <div>
                <span href="#" onClick={this.handleClick.bind(this, '张静', 18)}>
                    点我
                </span>
                <h2 onClick={this.countClick}>点我！点击次数为: {this.state.clickCount}</h2>
                <div style={{opacity: this.state.opacity}}>
                    Hello World
                </div>
                <Pagination showSizeChanger showQuickJumper  defaultCurrent={1} total={50} />
                <div className='m_l_16 m_t_20'>
                    <Spin indicator={antIcon} />
                </div>
            </div>
        )
    }
}
